<template>
  <el-row :gutter="20">
    <el-col :span="1"
      ><div class="grid-content ep-bg-purple" />
      <p>姓名</p></el-col
    >
    <el-col :span="23"
      ><div class="grid-content ep-bg-purple" />
      <el-input v-model="input" style="width: 240px" placeholder="请输入姓名"
    /></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="1"
      ><div class="grid-content ep-bg-purple" />
      <p>性别</p></el-col
    >
    <el-col :span="23"
      ><div class="grid-content ep-bg-purple" />
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio value="1"  size="large">男</el-radio>
          <el-radio value="2" size="large">女</el-radio>
        </el-radio-group>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="1"
      ><div class="grid-content ep-bg-purple" />
      爱好</el-col
    >
    <el-col :span="23"
      ><div class="grid-content ep-bg-purple" />
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-model="checked1" label="Option A" value="吃" />
        <el-checkbox v-model="checked2" label="Option B" value="喝" />
        <el-checkbox v-model="checked3" label="Option C" value="玩" />
        <el-checkbox v-model="checked4" label="Option D" value="乐" />
      </el-checkbox-group>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="1.5">
      <div class="grid-content ep-bg-purple" />
      我的口号</el-col
    >
    <el-col :span="22.5">
      <div class="grid-content ep-bg-purple" />
      <el-input
        v-model="textarea"
        style="width: 240px"
        :rows="3"
        type="textarea"
        placeholder="Please input"
      />
    </el-col>
  </el-row>
  <el-button color="#626aef" :dark="isDark">提交</el-button>
</template>


<style>
.el-row {
  margin-bottom: 0px;
  margin-top: 0px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
<script  setup>
import { ref } from "vue";
const input = ref("");
const radio1 = ref("1");
const checkList = ref(["Value selected and disabled", "Value A"]);
const textarea = ref("");
</script>